import UserAuth from '../login/UserAuth'
import { ThemeSwitch } from '../theme-switch'
import { usePathname, useRouter } from 'next/navigation'
import NextIcon from '../NextIcon'
import MobileMenu from '../DashBoard/MobileMenu'
import React from 'react'
import { items, MenuItem } from '../DashBoard/BasicMenu'
import { Breadcrumb } from 'antd'
import { BreadcrumbItem, Breadcrumbs } from '@nextui-org/react'
// import UserAuth from "../login/UserAuth";

export default function Header() {
  const pathname = usePathname()
  const { push } = useRouter()
  const getPathnames = (pathname: string) => {
    // 用 '/' 分割路径，并过滤掉空字符串
    const parts = pathname.split('/').filter(Boolean)

    // 构建完整的路径
    let currentPath = ''
    const result = parts.map(part => {
      currentPath += '/' + part // 拼接当前部分
      return { href: currentPath, name: part }
    })

    // 在结果数组开头插入空字符串（代表根路径）并过滤掉空字符串
    return result
  }

  const findMenuItemByKey = (
    menuItems: any[],
    key: string
  ): any | undefined => {
    for (const item of menuItems) {
      if (item?.key === key) {
        return item
      }
      if (item?.children?.length) {
        const foundItem = findMenuItemByKey(item?.children, key)
        if (foundItem) {
          return foundItem
        }
      }
    }
    return undefined
  }

  const findMenuItemsByKey = (
    menuItems: any[],
    key: string,
    preItems: any[]
  ): any | undefined => {
    for (const item of menuItems) {
      if (item?.key === key) {
        return [...preItems, item]
      }
      if (item?.children?.length) {
        const foundItem = findMenuItemsByKey(item?.children, key, [
          ...preItems,
          item
        ])
        if (foundItem) {
          return foundItem
        }
      }
    }
    return undefined
  }

  const currentMenuItem: MenuItem = React.useMemo(
    () => findMenuItemByKey(items, pathname),
    [items, pathname]
  )

  const currentMenuItems: MenuItem[] = React.useMemo(
    () => findMenuItemsByKey(items, pathname, []),
    [items, pathname]
  )

  return (
    <div className="h-[50px] leading-[50px] items-center flex justify-between px-4 my-2 ">
      <div className="flex sm:hidden items-center">
        <MobileMenu currentMenuItem={currentMenuItem} />
      </div>
      <div className="hidden sm:flex">
        <Breadcrumbs variant="solid">
          <BreadcrumbItem onClick={() => push('/dashboard')}>
            <NextIcon type="home" size={16} />
          </BreadcrumbItem>
          {currentMenuItems?.map((item: any) => {
            const href = item?.key as string
            return (
              <BreadcrumbItem onClick={() => push(href)} key={href} href={href}>
                {item?.label}
              </BreadcrumbItem>
            )
          })}
        </Breadcrumbs>
      </div>
      <div className="space-x-4 flex items-center">
        <UserAuth />
      </div>
    </div>
  )
}
